import React from 'react';
import {
    Row,
    Col,
    Timeline,
    AutoComplete,
    Card,
    Button,
    Tabs
} from 'antd';
import axios from 'axios';
import {config} from 'utils';
import intercept from '../../../utils/intercept';
const Option = AutoComplete.Option;
const TabPane = Tabs.TabPane;

export default class OrderList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        loading: false,
        stations: [],
        des:[],
        station:'',
        desinfo:'',
        url:''
    };
  }
  componentDidMount(){
    this.getStationInfo();
  }
  getStationInfo = () => {
    const token = sessionStorage.getItem("token");
    axios.get(`${config.api}Station/GetStations`,{headers: {Authorization: 'Bearer ' + token}}).then(res => {
      if(res.data.result){
        this.stationinfo = res.data.stationInfos;
        let tmp = res.data.stationInfos.map(m => (
          <Option key={m.globalcode} value={m.globalcode}>
            <span>{m.stationName}</span>
          </Option>
        ));
        this.setState({
          stations:tmp
        })
      }
    }).catch(err => {
      intercept;
    });
  }
  searchstation = (value) => {
    this.globalcode = value;
    let tmp = this.stationinfo.filter(m => m.globalcode == value)[0].stationName;
    console.log(tmp);
    this.setState({
      station:tmp
    });
    const token = sessionStorage.getItem("token");
    axios.get(`${config.api}Station/GetStationDes?globalcode=${value}`,{headers: {Authorization: 'Bearer ' + token}}).then(res => {
      if(res.data.result){
        let tmp = res.data.targetinfo.map(m => (
          <Option key={m.target} value={m.target}>
            <span>{m.target}</span>
          </Option>
        ));
        this.setState({
          des:tmp
        })
      }
    }).catch(err => {
      intercept;
    });
  }
  searchdes = (value) => {
    this.target = value;
    this.setState({
      desinfo:value
    });
    let url = `https://m.hn96606.com/index.html?type=qcp&globalcode=${this.globalcode}&target=${this.target}`;
    this.setState({
      url:encodeURIComponent(url)
    })
  }
  jump = () => {
    let url = `https://m.hn96606.com/index.html?type=qcp&globalcode=${this.globalcode}&target=${this.target}`;
    let baseurl = `https://cli.im/api/qrcode/code?text=${encodeURIComponent(url)}&mhid=50rFXQDoyMshMHctLtBXOaM`;
    window.open(baseurl, '_blank');
  }
  download = (data) => {
    let url = `http://218.28.27.171:9011/images/pmbackend/${data}.jpg`;
    window.open(url, '_blank');
  }
  render(){
    let listimgh = {
      verticalAlign: 'middle',
      marginTop: '15px',
      width:'100%'
    }
    let listimgv = {
      verticalAlign: 'middle',
      marginTop: '15px'
    }
    return(
      <div>
        <Row>
          <Col span={12}>
            <Card title="生成线路二维码" extra={<a>More</a>} style={{ width: 800 }}>
              <Row>
                <Col span={10}>
                  <span>汽车站 </span>
                  <AutoComplete
                    style={{
                      width: 200
                    }}
                    onSelect={this.searchstation}
                    dataSource={this.state.stations}
                    optionLabelProp="value"
                    filterOption={(inputValue, option) => option.props.children.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
                  />
                </Col>
                <Col span={10}>
                  <span>目的站 </span>
                  <AutoComplete
                    style={{
                      width: 200
                    }}
                    onSelect={this.searchdes}
                    dataSource={this.state.des}
                    optionLabelProp="value"
                    filterOption={(inputValue, option) => option.props.children.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
                  />
                </Col>
              </Row>
              <Timeline style={{marginTop:'20px',marginLeft:'20px'}}>
                <Timeline.Item>汽车站:{this.state.station}</Timeline.Item>
                <Timeline.Item>目的地:{this.state.desinfo}</Timeline.Item>
                <Timeline.Item>二维码地址:{this.state.url}</Timeline.Item>
              </Timeline>
              <Button type="primary" onClick={() => this.jump()} icon="download" size={'large'}>下载</Button>
            </Card>
          </Col>
          <Col span={12}>
            <Tabs defaultActiveKey="1">
              <TabPane tab="横版" key="1">
                <a style={{border:1,borderColor:'#108ee9',borderStyle:'solid',borderRadius:'4',padding:10,backgroundColor:'#108ee9',color:'white',marginBottom:'5'}} download={'h.jpg'} href={'http://218.28.27.171:9011/images/pmbackend/h.jpg'}>下载模板</a>
                <p></p>
                <img style={listimgh} src={require("../../image/h.png")} alt="" />
              </TabPane>
              <TabPane tab="竖版" key="2">
                <a style={{border:1,borderColor:'#108ee9',borderStyle:'solid',borderRadius:'4',padding:10,backgroundColor:'#108ee9',color:'white',marginBottom:'5'}} download={'v.jpg'} href={'http://218.28.27.171:9011/images/pmbackend/v.jpg'}>下载模板</a>
                <p></p>
                <img style={listimgv} src={require("../../image/v.png")} alt="" />
              </TabPane>
            </Tabs>
          </Col>
        </Row>
      </div>
    )
  }
}
